Getting Started
To use WPF Diagrams, add a reference to the Mindscape.WpfDiagramming.Foundation assembly. The diagramming controls are in the http://namespaces.mindscape.co.nz/wpf namespace which is usually aliased to the ms: prefix.
The main class for working with diagrams is the DiagramSurface class. DiagramSurface is a WPF control for presenting diagrams. You can create a DiagramSurface in XAML in the usual way, but you’ll usually also want to take advantage of the built-in styles and templates, so you should also merge in the DiagramShapes resource dictionary.
<Window.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ms:DiagramShapes /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Window.Resources> <ms:DiagramSurface Name="ds" />
By default the DiagramSurface displays an empty diagram, so the first thing to do is to add some shapes to it. You can do this in code using the ShapeNode class:
ds.Diagram.Nodes.Add(new ShapeNode { Shape = DiagramShapes.Rectangle, Bounds = new Rect(20, 20, 150, 80) });
Or you can add a DiagramToolBox to your window so that users can create shapes of their own:
<ms:DiagramToolBox> <ms:DiagramToolBoxGroup Header="Basic Shapes"> <ms:DiagramNodeTool ms:ShapeTool.Shape="Rectangle" /> <ms:DiagramNodeTool ms:ShapeTool.Shape="Ellipse" /> </ms:DiagramToolBoxGroup> </ms:DiagramToolBox>
When you select a shape, you will see that it has a number of connection points. You can drag the mouse between connection points to create a connection.
Finally, you can save and reload the diagrams you create using the DiagramXmlSerializer, and print them using the DiagramPrinter class.
In this quick introduction, we’ve seen the basics of creating a diagramming control and building simple diagrams on it. For more detail and to understand how to customise the appearance and layout of shapes and connections, see the QuickStart walkthrough.